<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" >
			<block slot="content">购物车</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="index_a">
				<view class="header_wrap">
					<view class="header_wrap_a">
						<u-icon name="search" color="#fff" size="16"></u-icon>
					</view>
					<view class="header_wrap_b">
						<input  placeholder="输入关键词搜索" v-model="keyword" placeholder-style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #BBBBBB;"/>
					</view>
					<view class="header_wrap_c">搜索</view>
				</view>
			</view>
			<view class="l_bg" style="width: 750rpx;">
				<view class="bor_jb">
					<view class="l_cen">
						<view class="l_top">
							<view class="l_bottom">
								<view class="index_b_d_aaa">
									<u-tabs
										ref="tabs" 
										:current="current" 
										@click="tabsChange" 
										lineColor="#CC8EBC"
										:activeStyle="{
												fontSize: '32rpx',
												fontFamily: 'PingFang SC',
												fontWeight: '800',
												color: '#CC8FBE'
												}"
										:inactiveStyle="{
												fontSize: '30rpx',
												fontFamily: 'PingFang SC',
												color: '#FFFFFF'
												}"
										itemStyle="padding-left:20rpx; padding-right:20rpx; height: 80rpx;"
										:list="order_type" 
										:is-scroll="false"
										>
									</u-tabs>
								</view>
								<view class="cart_a">
									<view class="cart_a_a">共{{cartLists.length}}件商品</view>
									<view class="cart_a_b" v-if="is_select" @click="qh_click()">编辑</view>
									<view class="cart_a_b" v-else @click="dal_click()">删除</view>
								</view>
								<view class="index_d" :style="'min-height:'+screenHeight+'px;padding-bottom: 160rpx;'">
									<view class="l_bg" style="margin-top: 20rpx;" v-for="(item, index) in cartLists" :key="index">
										<view class="bor_jb">
											<view class="l_cen">
												<view class="l_top">
													<view class="l_bottom">
														<view class="index_d_a" @click="gocart_selected_post(item)">
															<view class="index_d_a_b_c" v-if="item.type==1" :class="item.selected?'index_d_a_b_cc':''" :style="'background-image:url('+(xuanzhong)+');'"></view>
															<view class="index_d_a_b_c" v-if="item.type==2" :class="item.selected?'index_d_a_b_cc':''" :style="'background-image:url('+(xuanzhong)+');margin-top: 40rpx;'"></view>
															<view class="index_d_a_a" v-if="item.type==1">
																<custom-image :lazy-load="true" width="160rpx" height="160rpx" radius="10rpx" lazy-load :src="item.img"></custom-image>
															</view>
															<view class="index_d_a_a" style="height:95rpx;" v-if="item.type==2">
																<custom-image :lazy-load="true" width="160rpx" height="95rpx" radius="10rpx" lazy-load :src="item.img"></custom-image>
															</view>
															<view class="index_d_a_b">
																<view class="index_d_a_b_a">{{item.name}}</view>
																<view class="index_d_a_b_b">
																	<view class="index_d_a_b_b_a" v-if="item.type==1">规格：{{item.spec_value_str}}</view>
																	<view class="index_d_a_b_b_a" v-if="item.type==2">{{item.course_type_name}}</view>
																</view>
																<view class="index_d_a_b_d">
																	<view class="index_d_a_b_d_a" v-if="item.integral>0 && item.price>0">
																		<span>积分</span>{{item.integral}}+<span>¥</span>{{item.price}}
																	</view>
																	<view class="index_d_a_b_d_a" v-if="item.integral>0 && item.price<=0">
																		<span>积分</span>{{item.integral}}
																	</view>
																	<view class="index_d_a_b_d_a" v-if="item.integral<=0 && item.price>0">
																		<span>¥</span>{{item.price}}
																	</view>
																</view>
																<view class="index_d_a_b_d_b" v-if="item.type==1">
																	<u-number-box v-model="item.goods_num" bgColor="#CC8FBE" color="#fff" button-size="25" :min="1" :name="index"  @change="num_change" :max="item.stock" disabledInput></u-number-box>
																</view>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
									<loading-footer :status="status" :slot-empty="true">
										<view slot="empty" class="column-center" style="padding-top: 200rpx">
											<image class="img-null" src="/static/goods_null.png"></image>
											<text class="lighter">您的购物车有点寂寞哦</text>
										</view>
									</loading-footer>
								</view>
							</view>	
						</view>	
					</view>	
				</view>
			</view>	
			<view class="index_c">
				<view class="index_c_a" v-if="is_select">
					<view class="index_c_a_a">合计：</view>
					<view class="index_c_a_b">
						<view class="index_d_a_b_d_a" v-if="integral_sum>0 && money_sum>0">
							<span>积分</span>{{integral_sum}}+<span>¥</span>{{money_sum}}
						</view>
						<view class="index_d_a_b_d_a" v-if="integral_sum>0 && money_sum<=0">
							<span>积分</span>{{integral_sum}}
						</view>
						<view class="index_d_a_b_d_a" v-if="integral_sum<=0 && money_sum>0">
							<span>¥</span>{{money_sum}}
						</view>
						<view class="index_d_a_b_d_a" v-if="integral_sum<=0 && money_sum<=0">
							<span>¥</span>{{money_sum}}
						</view>
					</view>
				</view>
				<view class="index_c_b" @click="confirm_order_post()" :class="cart_lists.length==0?'index_c_bb':''">结算</view>
			</view>
		</view>
		
		<u-tabbar
			:value="value1"
			:fixed="true"
			:border="false"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			activeColor="#462981"
			inactiveColor="#9583BA"
			zIndex='101'
			@change="tabbar_change"
		>
			<u-tabbar-item text="首页" :icon="value1==0?'/static/tabbar_11.png':'/static/tabbar_1.png'" ></u-tabbar-item>
			<u-tabbar-item text="订单" :icon="value1==1?'/static/tabbar_22.png':'/static/tabbar_2.png'" ></u-tabbar-item>
			<u-tabbar-item text="购物车" :icon="value1==2?'/static/tabbar_33.png':'/static/tabbar_3.png'" ></u-tabbar-item>
			<u-tabbar-item text="我的" :icon="value1==3?'/static/tabbar_44.png':'/static/tabbar_4.png'" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>
<script>
import request from '@/common/request.js';
import {
	loadingType
} from '@/utils/type';
export default {
	data(){
		return {
			showLoading:true,
			value1:2,
			xuanzhong:request.baseUrl_img+'/img/xuanzhong.png',
			is_select:true,
			status: loadingType.LOADING,
			screenHeight:0,
			cartLists:[],
			goods_id:[],
			money_sum:0,
			integral_sum:0,
			cart_lists:[],
			current:0,
			order_type: [
				{
					name:'商品'
				},
				{
					name:'课程'
				}
			],
		}
	},
	onLoad: function (options) {
		this.current=options.current??0;
		// 获取系统信息
		const systemInfo = uni.getSystemInfoSync();
		// 获取屏幕高度
		this.screenHeight = systemInfo.screenHeight-260;
		console.log(this.screenHeight);
	},
	onShow() {
		this.uid=uni.getStorageSync('uid');
		this.getCartListFun();
	},	
	mounted() {
		
	},
	methods: {
		tabsChange(e){
			this.current=e.index;
			this.getCartListFun();
		},
		num_change(e){
			let value=e.value;
			let index=e.name;
			let cartLists=this.cartLists;
			let cartInfo=cartLists[index];
			const paramsList = {
				cart_id:cartInfo.cart_id,
				goods_num:value,
				uid:this.uid
			}
			let optsList = {
				url: 'c-change',
				method: 'post'
			};
			uni.showLoading({
				title: '更新中...',
				mask: true
			})
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if(res.data.code == 200){
					this.$set(cartLists[index],'goods_num',value);
					this.money_count();
				}else{
					uni.showToast({
						title: res.data.msg,
						icon:'none',
						duration: 2000
					});
				}
			});
		},
		money_count(){
			let cart_lists=[];
			let money_sum=0;
			let integral_sum=0;
			for(let i=0;i<this.cartLists.length;i++){
				if(this.cartLists[i].selected==1){
					if(this.current==1){
						cart_lists.push({
							goods_id:this.cartLists[i].goods_id,
							num: this.cartLists[i].goods_num
						});
					}else{
						cart_lists.push({
							item_id:this.cartLists[i].item_id,
							num: this.cartLists[i].goods_num
						});
					}
					money_sum+=Number(this.cartLists[i].goods_num)*Number(this.cartLists[i].price);
					integral_sum+=Number(this.cartLists[i].goods_num)*Number(this.cartLists[i].integral);
				}
			}
			this.money_sum=this.moneysum(money_sum);
			this.integral_sum=this.moneysum(integral_sum);
			this.cart_lists=cart_lists;
		},
		moneysum(value) {
			let number = parseFloat(value).toFixed(2)// 截取当前数据到小数点后两位四舍五入
			return number 
		},
		dal_click(){
			if (this.goods_id.length == 0){
				uni.showToast({
				    title:'您还没有选择删除的商品',
					icon:'none',
				    duration: 2000
				});
				return;
			} 
			this.goodsDelete();
		},
		goodsDelete() {
			const paramsList = {
				cart_id:this.goods_id,
				uid:this.uid
			}
			let optsList = {
				url: 'c-del',
				method: 'post'
			};
			uni.showLoading({
				title: '删除中...',
				mask: true
			})
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.showToast({
					title: res.data.msg,
					icon:'none',
					duration: 2000
				});
				uni.hideLoading();
				if(res.data.code == 200){
					_this.is_select=true;
					_this.getCartListFun();
				}
			});
		},
		getCartListFun() {
			let {
				cartLists,
				status
			} = this;
			let type=1;
			if(this.current==1){
				type=2;
			}
			const paramsList = {
				uid:this.uid,
				type:type
			}
			let optsList = {
				url: 'c-lists',
				method: 'get'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					_this.cartLists=res.data.data.lists;
					if (_this.cartLists.length <= 0) {
						_this.status = loadingType.EMPTY
					}else{
						_this.status = loadingType.FINISHED
					}
					_this.money_count();
				} else {
					_this.status = loadingType.ERROR
				}
				uni.hideLoading();
				_this.showLoading=false;
			});
		},
		qh_click(){
			if(this.is_select){
				this.is_select=false
			}else{
				this.is_select=true;
			}
			let {
				cartLists
			} = this;
			let goods_id = [];
			cartLists.forEach(item => {
				if (item.selected==1) {
					goods_id.push(item.cart_id);
				}
			});
			this.goods_id=goods_id;
		},
		confirm_order_post(){
			if(this.cart_lists.length==0){
				return;
			}
			let goods =this.cart_lists;
			if(this.current==1){
				uni.navigateTo({
					url: '/pages/confirm_order/confirm_curriculum_order?data=' + encodeURIComponent((JSON.stringify({
						goods,
						type: 'cart'
					}))),
				})
			}else{
				uni.navigateTo({
					url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent((JSON.stringify({
						goods,
						type: 'cart'
					}))),
				})
			}
		},
		gocart_selected_post(info) {
			if(info.selected==1){
				this.$set(info,'selected',0);
			}else{
				this.$set(info,'selected',1);
			}
			if(this.is_select){
				const paramsList = {
					cart_id:info.cart_id,
					selected:info.selected,
					uid:this.uid
				}
				let optsList = {
					url: 'c-selected',
					method: 'post'
				};
				uni.showLoading({
					title: '选择中...',
					mask: true
				})
				let _this=this;
				request.httpTokenRequest(optsList, paramsList).then(res => {
					uni.hideLoading();
					if(res.data.code == 200){
						this.money_count();
					}
				});
			}else{
				let {
					cartLists
				} = this;
				let goods_id = [];
				cartLists.forEach(item => {
					if (item.selected==1) {
						goods_id.push(item.cart_id);
					}
				});
				this.goods_id=goods_id;
			}
		},
		tabbar_change(e){
			if (e == '0') {
				uni.reLaunch({
					url: '/pages/home/vendor'
				})
				return;
			}else if (e == '1') {
				uni.reLaunch({
					url: '/pages/order/order'
				})
				return;
			}else if (e == '2') {
				uni.reLaunch({
					url: '/pages/cart/list'
				})
				return;
			}else if (e == '3') {
				uni.reLaunch({
					url: '/pages/user/info'
				})
				return;
			}
		}
	}
}
</script>

<style  lang="scss" scoped>
	.l_cen{
		color:initial;
	}
	.index_a{
		height: auto;
		width: 700rpx;
		overflow: hidden;
		padding: 25rpx;
		margin: auto;
	}
	.header_wrap{
		width: 100%;
		height: 72rpx;
		border-radius: 34rpx;
		background-color:#2B2030;
	}
	.header_wrap_a{
		width: 40rpx;
		height: 40rpx;
		float: left;
		margin-top: 17rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
	.header_wrap_b{
		width: 430rpx;
		height: 68rpx;
		float: left;
	}
	.header_wrap_b input{
		width: 430rpx;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
	}
	.header_wrap_c{
		width: 145rpx;
		height: 68rpx;
		background:#62469B;
		border-radius: 29rpx;
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
	}
	.index_b_d_aaa{
		width:375rpx;
		height: 100rpx;
		margin: auto;
		margin-top: 30rpx;
	}
	.cart_a{
		width: 700rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin: auto;
	}
	.cart_a_a{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		float: left;
		line-height: 60rpx;
	}
	.cart_a_b{
		width: 124rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: right;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		float: right;
	}
	.index_d{
		width: 700rpx;
		margin: auto;
		height:auto;
	}
	
	.index_d_a{
		width: 700rpx;
		height: auto;
		border-radius: 10rpx;
		padding:20rpx;
		overflow: hidden;
	}
	.index_d_a_a{
		width: 160rpx;
		height: 160rpx;
		border-radius:10rpx;
		overflow: hidden;
		float: left;
	}
	.index_d_a_b{
		width:420rpx;
		height: auto;
		float: left;
		position: relative;
		margin-left: 20rpx;
	}
	.index_d_a_b_a{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
	}
	.index_d_a_b_b{
		margin-top: 10rpx;
		overflow: hidden;
	}
	.index_d_a_b_b_a{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #CC8FBE;
		float: left;
		line-height: 42rpx;
	}
	.index_d_a_b_d{
		overflow: hidden;
	}
	.index_d_a_b_d_a{
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color:#FF6000;
	}
	.index_d_a_b_d_a span{
		font-size: 24rpx;
	}
	.index_d_a_b_d_b{
		position: absolute;
		bottom:0rpx;
		right: 0;
	}
	.index_d_a_b_b_b{
		float: left;
	}
	.index_d_a_b_b_b_a{
		background: #FFFFFF;
		border: 1px solid #E5E5E5;
		border-radius: 5px;
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 10rpx;
		float: left;
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FA7428;
	}
	.index_d_a_b_c{
		width: 30rpx;
		height: 30rpx;
		border: 1rpx solid #CC8FBE;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-position:center;
		background-size: 21rpx 15rpx;
		float: left;
		margin-top: 60rpx;
		margin-right: 20rpx;
	}
	.index_d_a_b_cc{
		background-color:#CC8FBE;
	}
	
	.index_c{
		width: 750rpx;
		height: 160rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #EDEDED;
		position: fixed;
		bottom: 100rpx;
		padding: 0 20rpx;
		z-index: 100;
	}
	.index_c_a{
		float: left;
	}
	.index_c_a_a{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 110rpx;
		float: left;
	}
	.index_c_a_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #E71102;
		line-height: 110rpx;
		float: left;
	}
	.index_c_b{
		width: 195rpx;
		height: 80rpx;
		background:#462981;
		border-radius: 40rpx;
		float: right;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin-top: 17rpx;
	}
	.index_c_bb{
		background: #cccccc;
	}
</style>
